<template>
  <div class="search-bar">
    <div class="search">
      <input
          placeholder="Search..."
          type="text"
          v-model="searchQuery"
          @input="onInput"
      />
      <div>
        <button type="submit" @click="performSearch">
          <svg
              width="15"
              height="15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              aria-labelledby="search"
              class="search-icon"
          >
            <path
                d="M7.667 12.667A5.333 5.333 0 107.667 2a5.333 5.333 0 000 10.667zM14.334 14l-2.9-2.9"
                stroke="currentColor"
                stroke-width="1.333"
                stroke-linecap="round"
                stroke-linejoin="round"
            ></path>
          </svg>
        </button>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';

const searchQuery = ref('');

const onInput = () => {
  // 可以在这里处理输入事件，例如 debounce 或其他逻辑
};

const performSearch = () => {
  // 触发搜索逻辑，例如发出事件或调用 API
  console.log('Searching for:', searchQuery.value);
};
</script>

<style scoped lang="scss">
.search-bar {
  display: flex;
  justify-content: center;
  width: 100%;
}

.search {
  position: relative;
  flex-grow: 1;
  max-width: 500px;
}

.search input[type="text"] {
  width: 100%;
  padding: 20px 40px;
  border: 2px solid #ddd;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-size: 16px;
}

.search button[type="submit"] {
  background-color: #ea4c89;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  border-radius: 40%;
  right: -70px;
  top: 12px;
  position: absolute;
  transition: 0.3s ease;
}

.search button[type="submit"]:hover {
  transform: scale(1.1);
  background-color: #ec5e95;
}

.search-icon {
  margin-right: 1px;
  margin-top: 1px;
}

</style>
